<template>
  <div class="diy">
    <van-field
      v-model="fieldValue"
      is-link
      readonly
      label="组件"
      placeholder="请选择想要的组件"
      @click="show = true"
    />

    <div class="zh-title-class">
      <div class="father-box" v-for="item in titleList" :key="item.label">
        <div class="l">
          {{ item.label }}
        </div>

        <draggable v-model="item.children" group="site" animation="100" class="flex-box" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd" @add="add2" :move="onMove">
        <div class="b" v-for="box in item.children" :key="box.label" @click="handleTitleCilick(box)">
            {{ box.label }}
          </div>
      </draggable>

      </div>
    </div>
     <div class="flex">
       <!-- <draggable v-model="table" group="site" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
        <div class="table" v-for="(item) in table" :key="item.id">
          <div class="title">
            待办事项 {{ item.id }}
          </div>
        </div>
      </draggable> -->

       <draggable v-model="backLog" group="site" animation="100" class="flex-box" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd" @add="add1" :move="onMove">
        <div class="box" v-for="item in backLog" :key="item.id">
          {{item.title}}
          <span>{{ item.clare }} 成长积分</span>
        </div>
      </draggable>
     </div>

    <van-popup v-model="show" round position="bottom">
      <van-cascader
        v-model="cascaderValue"
        title="请选择你要添加的组件"
        :options="options"
        @close="show = false"
        @finish="onFinish"
      />
    </van-popup>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: { draggable },
  data () {
    return {
      show: false,
      fieldValue: '',
      cascaderValue: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: '输入框',
          value: '330000',
          children: [{ text: 'Text', value: '330100' }, { text: 'passWord', value: '330120' }]
        },
        {
          text: '弹框',
          value: '320000',
          children: [{ text: '抽屉', value: '320100' }, { text: 'Dialog', value: '3201001' }]
        }
      ],
      backLog: [],
      titleList: [
        {
          label: '高手勋章',
          children: [
            {
              label: '分类A',
              children: [
                { title: '新手任务A', clare: '20', flag: false },
                { title: '互助实习生A', clare: '20', flag: false }
              ]
            },
            {
              label: '第二勋章分类',
              children: [
                { title: '二勋章分类B', clare: '20', flag: false },
                { title: '互二勋章分类B', clare: '20', flag: false }
              ]
            }
          ]
        },
        {
          label: '玩转WorkLife',
          children: [{
            label: '分类C',
            children: [
              { title: '新手任务', clare: '20', flag: false },
              { title: '互助实习生A', clare: '20', flag: false },
              { title: '互助实习B', clare: '20', flag: false },
              { title: '互助实习生C', clare: '20', flag: false }
            ]
          }]
        }
      ]

    }
  },
  methods: {
    onFinish ({ selectedOptions }) {
      this.show = false
      this.fieldValue = selectedOptions.map((option) => option.text).join('/')
    },
    onStart (e) {
      // console.log(e, 'start')
    },
    onEnd (e) {
      // console.log(e, 'end')
    },
    handleTitleCilick (item) {
      // console.log(item)
      this.backLog = item.children
    },
    onMove (e, item) {
      // console.log(e, item)
    },
    add1 (e) {
      console.log(e, 'add1')
    },
    add2 (e) {
      console.log(e, 'add2')
    }
  }
}
</script>

<style lang="less">
  .table {
    width: 150px;
    height: 150px;
    border: 1px solid #eee;
  }
  .flex {
    display: flex;
    flex-wrap: wrap;
    .flex-box {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
    }

  }
  .box {
    width: 150px;
    height: 150px;
    border: 1px dashed #45b8ff;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 5px;
    box-sizing: border-box;
    background: white;
    box-shadow: 0px 0px 8px 0px rgb(150 178 191 / 50%)
  }
  .ghostClass {
    background: pink;
  }
  .zh-title-class {
    display: flex;
    justify-content: space-between;
    .father-box {
      .l {
        font-size: 16px;
        color: #333;
        margin-bottom: 10px;
      }
      .b {
        font-size: 14px;
        color: #666;
        margin-bottom: 5px;
      }
    }
  }
</style>
